<template>
	<view class="content">
		<!--    <view id="my-canvas" class="my_canvas">-->
		<!--    <view class="header my_draw_canvas">-->
		<!--&lt;!&ndash;    <image class="headerImg my_draw_canvas" src="{{posterImg}}" data-type="image" data-url="{{posterImg}}"></image>&ndash;&gt;-->
		<!--    <text class="headerTitle my_draw_canvas" data-type="text" data-text="您的订单详情">您的订单详情</text>-->
		<!--    </view>-->
		<!--    </view>-->
		<view class="my_canvas box  my_draw_canvas" id="my-canvas"
			:style="[{ 'background-image': `url(${posterImg})` }, { color: textColor }]">
			<view class="watermark my_draw_canvas"
				:class="{watermark1: watermarkWidth > watermarkHeight && (watermarkWidth / watermarkHeight) >= 2}"
				:style="{display: watermarkFlag ? 'block' : 'none'}">
				<image :src="watermark" mode="aspectFit" class="my_draw_canvas" data-type="image"></image>
			</view>
			<view class="poster-text">
				{{posterText}}
			</view>
			<view class="canvasBox">
				<view class="avatar draw-img ">
					<image class="draw-img my_draw_canvas" :src="avatar" data-type="image"></image>
				</view>

				<view class="check draw-img my_draw_canvas">
					<!--        <text class="headerTitle title my_draw_canvas" data-type='text' data-text="您的订单详情">您的订单详情2</text>-->

					<text class="headerTitle title my_draw_canvas" data-type="text" data-text="您的订单详情">{{ diyText }}
						<text class="clock-day-text">{{ markText }}</text>
					</text>
					<view class="changeText" @click="isShowPopup = true">修改</view>
				</view>

				<view class="date">
					<view class="time">{{ time }}</view>
					<view class="solid"></view>
					<view class="right">
						<view class="day">{{ nowDate }}</view>
						<view class="week">{{ week }}</view>
					</view>
				</view>

				<view class="address" @click="localtion">
					<view class="text">{{ addressNow ? addressNow : '点击获取' }}</view>
					<view class="text2">位置</view>
				</view>
			</view>

			<view class="code">
				<image :src="defaultCode"></image>
			</view>
		</view>
		<view class="tab">
			<view class="tab-title">
				<view class="item" data-id="1" :style="tabId == 1 ? 'background-color: #EEFFF4; color: #07C160' : ''"
					@click="onTab">
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/check/icon_img.png"></image>
					<text>换图</text>
				</view>
				<view class="item" data-id="2" :style="tabId == 2 ? 'background-color: #EEFFF4; color: #07C160' : ''"
					@click="onTab">
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/check/icon_text.png"></image>
					<text>文案</text>
				</view>
				<view class="item" data-id="3" :style="tabId == 3 ? 'background-color: #EEFFF4; color: #07C160' : ''"
					@click="onTab">
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/check/icon_sticker.png"></image>
					<text>加LOGO</text>
				</view>
				<view class="item" data-id="4" :style="tabId == 4 ? 'background-color: #EEFFF4; color: #07C160' : ''"
					@click="onTab">
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/code.png"></image>
					<text>换/去码</text>
				</view>
			</view>

			<view class="tab-content">
				<view class="box1" v-if="tabId == 1">
					<view class="item" @click="chooseImg">
						<view class="camera">
							<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/camera.png"></image>
							<text>上传照片</text>
						</view>
					</view>
					<view class="item" v-for="(item, index) in imgList" :key="index" @click="onChingeImg(item)">
						<image :src="item.img"></image>
						<view v-if="item.img==posterImg" class="in-use">
							使用中
						</view>
					</view>
				</view>

				<view class="box2" v-if="tabId == 2">
					<view class="color">
						<view class="item" v-for="item in colorList" :key="item.id" @click="onChingeColor(item)">
							<view class="outside" :style="item.id == colorId ? 'border: 1rpx solid #7e7e7e' : ''">
								<view class="inside"
									:style="[{ 'background-color': item.color }, { border: item.color == '#fff' ? '1rpx solid #7e7e7e' : `1rpx solid ${item.color}` }]">
								</view>
							</view>
						</view>
					</view>

					<view class="line"><text>点击右侧按钮可复制文字分享</text></view>

					<view class="text">
						<view class="item" v-for="(item, index) in textList" :key="index" @click="onChangeText(item)">
							<text :style="markTextId == item.id ? 'color: #07C160' : ''">{{ item.name }}</text>
							<image
								:src="markTextId == item.id ? 'http://sni1muz85.hd-bkt.clouddn.com/img/icons/copy1.png' : 'http://sni1muz85.hd-bkt.clouddn.com/img/icons/copy.png'"
								@click="onCopy(item)"></image>
						</view>
					</view>
				</view>
				<view class="box3" v-if="tabId == 3">
					<!--          <view class="item"  @click="chooseWater">-->
					<!--            <view class="camera"  >-->
					<!--              <image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/camera.png"></image>-->
					<!--              <text>上传LOGO</text>-->
					<!--            </view>-->
					<!--          </view>-->
					<!--          <view class="item cancelWater"  @click="cancelWater">-->
					<!--            <view class="camera" v-show="watermark">-->
					<!--              <image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/close.png"></image>-->
					<!--              <text>取消LOGO</text>-->
					<!--            </view>-->
					<!--          </view>-->
					<view class="line">
						<view class="btn btn1" @click="chooseWater">上传LOGO</view>
						<view class="btn btn2" @click="cancelWater">取消LOGO</view>
					</view>
				</view>
				<view class="box4" v-if="tabId == 4">
					<view class="line">
						<view class="btn btn1" @click="changeCode">更换二维码</view>
						<view class="btn btn2" @click="deleteCode">去除二维码</view>
					</view>
				</view>
			</view>
		</view>

		<view class="popup" v-if="isShowPopup">
			<view class="M"></view>
			<view class="popup-box">
				<view class="title">修改文字</view>
				<view class="input-box"><textarea placeholder="请输入20以内文字" maxlength="20" auto-focus
						v-model="popupInput"></textarea></view>
				<view class="popup_select">
					<view v-for="(item,index) in popup_selects" @click="popup_choose(index)"
						:class="popup_selects_id==index?'on':''">
						{{item}}
					</view>
				</view>
				<view class="btnrow">
					<view class="btn btn1" @click="isShowPopup = false">取消</view>
					<view class="btn btn2" @click="onPopupSubmit">确认</view>
				</view>
			</view>
		</view>

		<!-- 占位 -->
		<view class="z"></view>
		<!-- <view class="submit" @click="open">保存图片</view> -->
		<view class="submit" @click="drawPoster">保存图片</view>

		<l-painter ref="poster" @fail="fail" @done="done" pathType="url" isCanvasToTempFilePath
			style="position: fixed; left: 200%"></l-painter>
		<!-- <canvas canvas-id="myCanvas" class="myCanvas"></canvas> -->
		<!-- <liu-poster ref="liuPoster" :width="width" :height="height" @change="change"></liu-poster> -->
		<!--    <yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="chooseImg" scale="1"></yhdslCropper>-->
		<!--    <image-cropper :src="posterImg" @confirm="confirm" @cancel="cancel"></image-cropper>-->
		<!--    <image class="success-img" :src="url" @click="previewImg(url)"></image>-->
		<!--    <canvas id="myCanvas" type="2d" style="border: 1px solid; width: 92%; height: 120vw;" />-->
		<!--    <view class="container">-->
		<!--      <bt-cropper ref="cropper" :imageSrc="posterImg"></bt-cropper>-->
		<!--&lt;!&ndash;      <button @click="crop">裁切</button>&ndash;&gt;-->
		<!--    </view>-->
	</view>
</template>

<script>
	import html2canvas from 'html2canvas';
	import Wxml2Canvas from 'wxml2canvas';
	// import LiuPoster from "../../uni_modules/liu-poster/components/liu-poster/liu-poster.vue";

	export default {
		// components: {LiuPoster},
		data() {
			return {
				url: '',
				// defaultCode: 'https://www.qifeiy.com/profile/upload/2023/09/10/tmp_2f21599a7a4e313acb281c102c2d17ad_20230910170710A003.jpg',
				defaultCode: 'http://sni1muz85.hd-bkt.clouddn.com/img/my/qrCode.png',
				watermark: null,
				posterText: "",
				nowDate: null,
				tabId: 1,
				posterImg: null, // 海报背景
				imgList: [],
				time: null,
				addressNow: '',
				colorId: 1,
				textColor: '#fff',
				tempFilePath: '',
				cropFilePath: '',
				localAd: false,
				popup_selects: ['原始累计', '重新统计', '不显示'],
				popup_selects_id: 0,
				colorList: [{
						id: 1,
						color: '#fff'
					},
					{
						id: 2,
						color: '#000'
					},
					{
						id: 3,
						color: '#ff0000'
					},
					{
						id: 4,
						color: '#1000ff'
					},
					{
						id: 5,
						color: '#07C160'
					},
					{
						id: 6,
						color: '#500099'
					},
					{
						id: 7,
						color: '#ffb100'
					}
					// {
					// 	id: 8,
					// 	color: "#7C30B7"
					// },
					// {
					// 	id: 9,
					// 	color: "#B73030"
					// },
					// {
					// 	id: 10,
					// 	color: "#30B79F"
					// },
					// {
					// 	id: 11,
					// 	color: "#303EB7"
					// },
					// {
					// 	id: 12,
					// 	color: "#FF8E26"
					// },
				],

				diyText: '连续早起',
				avatar: '',
				week: 1,
				markText: '',
				markTextId: 1,
				watermarkHeight: 0,
				watermarkWidth: 0,
				textList: [{
						id: 1,
						text: '鸡汤文字1啊实打实打算萨达飒飒水水水水水水水水的大苏打撒旦'
					},
					{
						id: 2,
						text: '我命由我不由天'
					},
					{
						id: 3,
						text: '事在人为'
					},
					{
						id: 4,
						text: '鸡汤文字，巴拉巴拉。'
					}
				],
				isShowPopup: false,
				popupInput: '',
				num: 0,
				data: {},
				width: 0,
				height: 0,
				params: {},
				groupId: null,
				device: null,
				watermarkFlag: false
			};
		},
		onLoad(res) {
			if (res) {
				this.groupId = res.groupId;
			}
			(this.diyText = uni.getStorageSync('diyText') ? uni.getStorageSync('diyText') : '连续早起'),
			(this.watermark = uni.getStorageSync('watermark') ? uni.getStorageSync('watermark') : '');
			this.initData();
			const that = this
			this.ad = wx.createRewardedVideoAd({
				adUnitId: "adunit-cd10a8d43c65f55e"
			})
			this.ad.onError(() => {
				that.localAd = true
			})
			this.ad.onClose((status) => {
				if (status.isEnded) {
					uni.setStorageSync("lastIndexAdTime", Date.now())
				}
			})
		},
		onShow() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					that.device = res;
				}
			});
			// console.log('进入show');
			// console.log(this.params);

			let now = new Date();
			let month = now.getMonth() + 1;
			let day = now.getDate();
			this.nowDate = now.getFullYear() + '.' + month + '.' + day;
			const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			this.week = weekDays[now.getDay()];
			let hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
			let minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
			this.time = hour + ':' + minute;
		},
		watch: {
			watermarkHeight: {
				handler(val) {
					console.log(val);
					this.watermarkHeight = val;
				},
				immediate: true,
				deep: true
			},
			watermarkWidth: {
				handler(val) {
					console.log(val);
					this.watermarkWidth = val;
				},
				immediate: true,
				deep: true
			},
			posterImg: {
				handler(val) {
					console.log(val);
					this.posterImg = val;
				},
				immediate: true,
				deep: true
			},
			height: {
				handler(val) {
					console.log(val);
					this.height = val;
				},
				immediate: true,
				deep: true
			},
			width: {
				handler(val) {
					console.log(val);
					this.width = val;
				},
				immediate: true,
				deep: true
			},
			defaultCode: {
				handler(val) {
					console.log(val);
					this.defaultCode = val;
				},
				immediate: true,
				deep: true
			},
			watermark: {
				handler(val) {
					wx.getImageInfo({
						src: val,
						success: (res) => {
							this.watermarkWidth = res.width;
							this.watermarkHeight = res.height;
							this.watermarkFlag = true
						}
					});
				},
				immediate: true,
				deep: true
			},

		},
		ready() {},
		methods: {
			//开始绘制
			popup_choose(index) {
				this.popup_selects_id = index
			},
			open() {
				let that = this;

				//  wx.getImageInfo({
				//   src: this.posterImg,
				//   success(res) {
				//     console.log(res.width)
				//     console.log(res.height)
				//
				// }})
				let backgroundHeight = this.height;
				let backgroundWidth = this.width;

				let canvasList = [{
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: backgroundWidth, //宽度(rpx)
					height: backgroundHeight, //高度(rpx)
					x: 0, //x轴位置(离左边的距离rpx)
					y: 0, //y轴位置(离上边的距离rpx)
					radius: 0, //圆角(rpx)
					path: that.posterImg,
					childs: [{
							type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 70, //宽度(rpx)
							height: 70, //高度(rpx)
							x: 22, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 226 - 100, //y轴位置(离上边的距离rpx)
							radius: 12, //圆角(rpx)
							path: this.avatar
						},

						{
							type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 400, //文本宽度(rpx)
							height: 46, //文本高度(rpx)
							x: 22, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 46 - 164, //y轴位置(离上边的距离rpx)
							color: that.textColor, //文本颜色
							fontSize: 24, //文字大小(rpx)
							lineHeight: 46, //文字行高(rpx)
							bold: true, //文字是否加粗
							content: that.diyText + ' ' + that.markText //文本内容(type为text时必填)
						},

						{
							type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 400, //文本宽度(rpx)
							height: 72, //文本高度(rpx)
							x: 22, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 86 - 72, //y轴位置(离上边的距离rpx)
							color: that.textColor, //文本颜色
							fontSize: 48, //文字大小(rpx)
							lineHeight: 65, //文字行高(rpx)
							bold: true, //文字是否加粗
							content: that.time //文本内容(type为text时必填)
						},
						{
							type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 4, //线条宽度(rpx)
							color: that.textColor, //线条颜色
							startX: 165, //起点x轴位置(离左边的距离rpx)
							startY: backgroundHeight - 86 - 65, //起点y轴位置(离上边的距离rpx)
							endX: 165, //终点x轴位置(离左边的距离rpx)
							endY: backgroundHeight - 100, //终点y轴位置(离上边的距离rpx)
							lineType: 'solid' //线条类型(solid:实线;dash:虚线)
						},
						{
							type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 107, //文本宽度(rpx)
							height: 28, //文本高度(rpx)
							x: 185, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 86 - 72, //y轴位置(离上边的距离rpx)
							color: that.textColor, //文本颜色
							fontSize: 16, //文字大小(rpx)
							lineHeight: 23, //文字行高(rpx)
							bold: false, //文字是否加粗
							content: that.nowDate //文本内容(type为text时必填)
						},
						{
							type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 66, //文本宽度(rpx)
							height: 31, //文本高度(rpx)
							x: 185, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 92 - 31, //y轴位置(离上边的距离rpx)
							color: that.textColor, //文本颜色
							fontSize: 18, //文字大小(rpx)
							lineHeight: 26, //文字行高(rpx)
							bold: false, //文字是否加粗
							content: that.week //文本内容(type为text时必填)
						},

						{
							type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
							width: 120, //宽度(rpx)
							height: 120, //高度(rpx)
							x: backgroundWidth - 140, //x轴位置(离左边的距离rpx)
							y: backgroundHeight - 80 - 60, //y轴位置(离上边的距离rpx)
							radius: 0, //圆角(rpx)
							path: that.defaultCode
						}
					]
				}];
				if (that.watermark) {
					canvasList[0].childs.push({
						type: 'image',
						//绘制类型(color:背景色;image:图片;text:文字;line:线条),
						// width: this.watermarkWidth-35, //宽度(rpx)
						// height: this.watermarkHeight-35, //高度(rpx)
						width: 180, //宽度(rpx)
						height: 60, //高度(rpx)
						x: 24, //x轴位置(离左边的距离rpx)
						y: 20, //y轴位置(离上边的距离rpx)
						radius: 0, //圆角(rpx)
						path: that.watermark
					});
				}
				if (that.addressNow) {
					canvasList[0].childs.push({
						type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
						width: 600, //文本宽度(rpx)
						height: 46, //文本高度(rpx)
						x: 27, //x轴位置(离左边的距离rpx)
						y: backgroundHeight - 46 - 40, //y轴位置(离上边的距离rpx)
						color: that.textColor, //文本颜色
						fontSize: 22, //文字大小(rpx)
						lineHeight: 46, //文字行高(rpx)
						bold: false, //文字是否加粗
						content: that.addressNow //文本内容(type为text时必填)
					});
				}
				this.$nextTick(() => {
					this.$refs.liuPoster.init(canvasList);
				});
			},
			confirm(e) {
				this.tempFilePath = '';
				this.cropFilePath = e.detail.tempFilePath;
			},
			//绘制成功返回生成的海报图片地址
			change(e) {
				this.url = e;
				this.savePoster(e);
			},
			//预览生成的海报图片
			previewImg(url) {
				if (!url) return;
				uni.previewImage({
					urls: [url]
				});
			},
			changeCode() {
				let that = this
				const lastAdTime = uni.getStorageSync("lastIndexAdTime") || uni.getStorageSync("lastCardAdTime")
				const showAd = (new Date(lastAdTime).toDateString() === new Date().toDateString())
				if (showAd) {
					// 已展示过广告
					this.chooseImageCore()
				} else {
					if (this.localAd) {
						// 获取广告列表
						this.$api
							.request({
								url: this.$api.advertList
							})
							.then(res => {
								this.adList = res.data;
								let item = this.adList[Math.floor(Math.random() * this.adList.length)];
								this.times = item.second;
								uni.navigateTo({
									url: '/pages/index/ad?type=1&link=' + item.link + '&times=' + this.times
								});
							});
					} else {
						this.ad.load()
						this.ad.show().catch(() => {
							// 获取广告列表
							this.$api
								.request({
									url: this.$api.advertList
								})
								.then(res => {
									this.adList = res.data;
									let item = this.adList[Math.floor(Math.random() * this.adList.length)];
									this.times = item.second;
									uni.navigateTo({
										url: '/pages/index/ad?type=1&link=' + item.link + '&times=' +
											this.times
									});
								});
						})
					}
				}
			},
			chooseImageCore() {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: res => {
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '1:1', // 裁剪比例
							success: res => {
								uni.uploadFile({
									url: that.$api.uploadImg, //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									success: res => {
										let da = JSON.parse(res.data);
										that.defaultCode = da.url;
									}
								});
							}
						});
					}
				})
			},

			// 切换选项卡
			onTab(e) {
				// console.log(e.currentTarget.dataset.id)
				this.tabId = e.currentTarget.dataset.id;
				console.log(e);
				// if (this.tabId==3){
				//   let that = this
				//
				//   uni.chooseImage({
				//     count: 1,
				//     sizeType: ['original'],
				//     sourceType: ['album'],
				//     success: (res) => {
				//       uni.uploadFile({
				//         url: that.$api.uploadImg, //仅为示例，非真实的接口地址
				//         filePath: res.tempFilePaths[0],
				//         name: 'file',
				//         success: (res) => {
				//           console.log(res);
				//           let da=JSON.parse(res.data);
				//           that.watermark=da.url
				//         }
				//       });
				//     }
				//   })
				// }
			},
			deleteCode() {
				const lastAdTime = uni.getStorageSync("lastIndexAdTime") || uni.getStorageSync("lastCardAdTime")
				const showAd = (new Date(lastAdTime).toDateString() === new Date().toDateString())
				// let is=false
				if (showAd) {
					this.defaultCode = ''
				} else {
					if (this.localAd) {
						this.$api
							.request({
								url: this.$api.advertList
							})
							.then(res => {
								this.adList = res.data;
								let item = this.adList[Math.floor(Math.random() * this.adList.length)];
								this.times = item.second;
								uni.navigateTo({
									url: '/pages/index/ad?type=1&link=' + item.link + '&times=' + this.times
								});
							});
					} else {
						this.ad.load()
						this.ad.show().catch(() => {
							// 获取广告列表
							this.$api
								.request({
									url: this.$api.advertList
								})
								.then(res => {
									this.adList = res.data;
									let item = this.adList[Math.floor(Math.random() * this.adList.length)];
									this.times = item.second;
									uni.navigateTo({
										url: '/pages/index/ad?type=1&link=' + item.link + '&times=' +
											this.times
									});
								});
						})
					}
				}
				/**
				if (!is) {
					this.$api
						.request({
							url: this.$api.advertList
						})
						.then(res => {
							this.adList = res.data;
							let item = this.adList[Math.floor(Math.random() * this.adList.length)];
							this.times = item.second;
							uni.navigateTo({
								url: '/pages/index/ad?type=1&link=' + item.link + '&times=' + this.times
							});
						});

					return;
				}

				this.defaultCode = '';
				**/
			},
			cancelWater() {
				this.watermark = '';
				uni.setStorageSync('watermark', '');
			},
			chooseWater() {
				let that = this;

				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: res => {
						// wx.getImageInfo({
						// 	src: res.tempFilePaths[0],
						// 	success(res) {
						// 		console.log(res, 'adas');
						// 		that.watermarkWidth = uni.upx2px(res.width);
						// 		that.watermarkHeight = uni.upx2px(res.height);
						// 	}
						// });
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '3:4', // 裁剪比例
							success: res => {
								uni.uploadFile({
									url: that.$api.uploadImg, //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									success: res => {
										console.log(res);
										let da = JSON.parse(res.data);
										that.watermark = da.url;
										uni.setStorageSync('watermark', da.url);
									},
									fail: res => {
										console.log(res);
									}
								});
							}
						});
					}
				});
			},
			handleCrop(e) {
				uni.previewImage({
					urls: [e.tempFilePath],
					current: 0
				});
			},

			initData() {
				let that = this;
				this.$api
					.request({
						url: this.$api.getPicture
					})
					.then(res => {
						this.imgList = res.data;
						if (res.data) {
							res.data.forEach(item => {
								if (item.isDefault === 1) {
									this.posterImg = item.img;
								}
							});
							if (!this.posterImg) {
								this.posterImg = res.data[0].img;
							}
							wx.getImageInfo({
								src: that.posterImg,
								success(res) {
									that.width = uni.upx2px(res.width);
									that.height = uni.upx2px(res.height);
								}
							});
						}
					});

				this.$api
					.request({
						url: this.$api.getText
					})
					.then(res => {
						this.textList = res.data;
					});
				this.$api
					.request({
						url: this.$api.getInfo
					})
					.then(res => {
						this.avatar = res.data.avatar;
					});

				this.$api
					.request({
						url: this.$api.getLog
					})
					.then(res => {
						// this.num=res.data.length;
						this.markText = res.data.length + ' 天';
					});
			},

			drawMyCanvas() {
				wx.showLoading({
					title: '正在绘制'
				});
				const that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#my-canvas')
					.fields({
							// 选择需要生成canvas的范围
							size: true,
							scrollOffset: true
						},
						data => {
							console.log(data);
							that.width = data.width;
							that.height = data.height;

							setTimeout(() => {
								that.startDraw();
							}, 1500);
						}
					)
					.exec();
			},
			startDraw() {
				let that = this;

				// 创建wxml2canvas对象
				let drawMyImage = new Wxml2Canvas({
						element: 'myCanvas', // canvas的id,
						obj: that, // 传入当前组件的this
						width: that.width * 2,
						height: that.height * 2,
						// background: '#141415', // 生成图片的背景色
						progress(percent) {
							// 进度
							// console.log(percent);
						},
						finish(url) {
							// 生成的图片
							console.log(url);
							wx.hideLoading();
							that.savePoster(url);
						},
						error(res) {
							// 失败原因
							console.log(res);
							wx.hideLoading();
						}
					},
					this.$scope
				);
				let data = {
					// 获取wxml数据
					list: [{
						type: 'wxml',
						class: '.my_canvas .my_draw_canvas',
						limit: '.my_canvas'
					}]
				};
				// 绘制canvas
				drawMyImage.draw(data, this);
			},

			diyDrawImage() {
				let that = this;

				console.log(that.device);
				let widthElement;
				let heightElement;
				// 获取元素
				//       var element = document.getElementById('box');
				wx.createSelectorQuery()
					.select('#box')
					.boundingClientRect(data => {
						console.log('test元素的宽度：', data);

						widthElement = data.width;
						heightElement = data.height;
					})
					.exec();
				// 获取元素的宽度

				wx.createSelectorQuery()
					.select('#myCanvas') // 在 WXML 中填入的 id
					.fields({
						node: true,
						size: true
					})
					.exec(res => {
						console.log(res);
						// Canvas 对象
						const canvas = res[0].node;
						// 渲染上下文
						const ctx = canvas.getContext('2d');

						// Canvas 画布的实际绘制宽高
						const width = that.device.screenWidth;

						const height = that.device.screenHeight;

						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio;
						canvas.width = width * dpr;
						canvas.height = height * dpr;
						ctx.scale(dpr, dpr);
						// 图片对象
						const image = canvas.createImage();
						console.log(image);
						image.src =
							'https://www.qifeiy.com/profile/upload/2023/08/28/IMG_2415_20230828234732A019.jpeg';

						// 图片加载完成回调
						image.onload = () => {
							// 将图片绘制到 canvas 上
							ctx.drawImage(image, 0, 0, width, height);
							// let pattern = ctx.createPattern(canvas, 'repeat');
							//   ctx.fillStyle = pattern;
							//   ctx.fillRect( 0, 0, canvas.width, canvas.height);
						};
						const avatar = canvas.createImage();
						avatar.src =
							'https://www.qifeiy.com/profile/upload/2023/09/06/62017d8eaf548ad8e7b0834aed4ab955332bc47cf4a39-ysWj1z_fw1200_20230906160205A014.jpg';
						avatar.onload = () => {
							// 将图片绘制到 canvas 上
							// avatar.bottom(300)

							ctx.drawImage(avatar, 0, 0, avatar.width, avatar.height, 20, 600, 100, 100);
							// ctx.globalCompositeOperation="source-over"
							// 将图片插入画布中并将其固定在(0,0)点
							// ctx.drawImage(avatar, 0, 0);
							// 设置圆角半径为50
							var radius = 50;
							// 开始绘制圆角矩形路径
							ctx.beginPath();
							// 左上角
							ctx.arc(radius, radius, radius, Math.PI, Math.PI * 1.5);
							// 右上角
							ctx.arc(avatar.width - radius, radius, radius, Math.PI * 1.5, Math.PI * 2);
							// 右下角
							ctx.arc(avatar.width - radius, avatar.height - radius, radius, 0, Math.PI * 0.5);
							// 左下角
							ctx.arc(radius, avatar.height - radius, radius, Math.PI * 0.5, Math.PI);
							// 结束绘制路径
							ctx.closePath();
							// 将路径限制到绘图区域内
							ctx.clip();
							// 重新绘制图片并且只能在圆角矩形内显示
							// ctx.drawImage(avatar, 0, 0);
							ctx.drawImage(avatar, 0, 0, avatar.width, avatar.height, 20, 600, 100, 100);
							// ctx.fontSize="32rpx"
							ctx.font = 'bold' + 32 * dpr + 'sans-serif';
							ctx.fillStyle = '#ff0000';
							ctx.fillText('连续早起', 20, 800);
						};

						// ctx.globalCompositeOperation="source-over"
						console.log(ctx);
						// ctx.fillText("Hello World", 10, 50);
						// 设置图片src
					});
			},
			// 绘制圆角矩形函数
			roundRect(x, y, width, height, radius, ctx) {
				ctx.beginPath();
				ctx.moveTo(x + radius, y);
				ctx.lineTo(x + width - radius, y);
				ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
				ctx.lineTo(x + width, y + height - radius);
				ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
				ctx.lineTo(x + radius, y + height);
				ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
				ctx.lineTo(x, y + radius);
				ctx.quadraticCurveTo(x, y, x + radius, y);
				ctx.clip();
			},
			savePoster(url) {
				const that = this;
				wx.saveImageToPhotosAlbum({
					filePath: url,
					success: function() {
						wx.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1500
						});
					},
					fail(err) {
						if (
							err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
							err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
							err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response'
						) {
							wx.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											if (settingdata.authSetting[
													'scope.writePhotosAlbum']) {
												wx.saveImageToPhotosAlbum({
													filePath: that.data.imgUrl,
													success: function() {
														wx.showToast({
															title: '保存成功',
															icon: 'success',
															duration: 2000
														});
													}
												});
											} else {
												wx.showToast({
													title: '授权失败，请稍后重新获取',
													icon: 'none',
													duration: 1500
												});
											}
										}
									});
								}
							});
						}
					}
				});
			},

			localtion() {
				let that = this;
				uni.chooseLocation({
					// type: 'wgs84',
					success: function(res) {
						console.log(res);
						console.log('当前位置的纬度：' + res.latitude);
						that.addressNow = res.address;
						// that.$emit('handlerChange', res);
					}
				});
			},
			// 改变海报背景图
			onChingeImg(item) {
				this.posterImg = item.img;
			},
			premise() {
				console.log(this.$refs.yhdslCropper);
				this.$refs.yhdslCropper.chooseImage();
			},

			chooseImg() {
				let that = this;

				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: res => {
						console.log(res);
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '3:4', // 裁剪比例
							success: res => {
								console.log(res);
								uni.uploadFile({
									url: that.$api.uploadImg, //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									success: res => {
										console.log(res);
										let da = JSON.parse(res.data);
										that.posterImg = da.url;
									}
								});
							},
							fail: res => {
								console.log(res);
							}
						});
					}
				});
			},
			// 改变颜色
			onChingeColor(item) {
				this.colorId = item.id;
				this.textColor = item.color;
			},

			// 改变文字
			onChangeText(item) {
				// this.markText = item.text
				this.markTextId = item.id;
				this.posterText = item.name;
			},

			// 复制文字
			onCopy(item) {
				uni.setClipboardData({
					data: item.name,
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},

			// 修改文字确认
			onPopupSubmit() {
				uni.setStorageSync('diyText', this.popupInput);
				this.diyText = this.popupInput;
				this.isShowPopup = false;
			},
			submit() {
				// console.log(this.$refs)
				this.drawMyCanvas();
				// html2canvas(window.document.getElementById("canvasToPic"),{
			},
			drawPoster() {
				uni.showLoading({
					title: '正在绘制...'
				});
				// console.log(this.height, this.width);
				const jsonSchema = {
					css: {
						// width: this.width,
						// height: this.height,			
						width: 400,
						height: 533,
						backgroundImage: `url(${this.posterImg})`,
					},
					views: [{
							type: 'view',
							css: {
								width: '100%',
								position: 'fixed',
								bottom: '25rpx',
								left: 0,
								paddingLeft: "25rpx",
								paddingRight: "25rpx",
							},
							views: [{
									type: 'image',
									src: this.avatar,
									css: {
										width: '110rpx',
										height: '110rpx',
										borderRadius: '12rpx',
									}
								},
								{
									type: 'text',
									text: this.diyText + ' ' + this.markText,
									css: {
										width: '80%',
										display: "block",
										color: this.textColor,
										fontSize: '40rpx',
										fontWeight: "bold",
										marginTop: '40rpx'
									}
								},
								{
									type: 'view',
									css: {
										marginTop: '10rpx',
									},
									views: [{
											type: 'text',
											text: this.time,
											css: {
												height: '68rpx',
												display: "inline-block",
												color: this.textColor,
												lineHeight: '72rpx',
												fontSize: '68rpx',
												fontWeight: "bold"
											}
										},
										{
											type: 'view',
											css: {
												width: '5rpx',
												height: '72rpx',
												display: "inline-block",
												background: this.textColor || "#fff",
												marginRight: '20rpx',
												marginLeft: '20rpx',
											}
										},
										{
											type: 'view',
											css: {
												with: '100rpx',
												lineHeight: '36rpx',
												display: 'inline-block'
											},
											views: [{
													type: 'text',
													text: this.nowDate,
													css: {
														color: this.textColor,
														fontSize: '24rpx',
														display: 'block'
													}
												},
												{
													type: 'text',
													text: this.week,
													css: {
														color: this.textColor,
														fontSize: '24rpx',
													}
												}
											]
										}
									]
								},
								{
									type: 'view',
									css: {
										width: '390rpx',
									},
									views: [
										this.addressNow && {
											type: 'text',
											text: this.addressNow,
											css: {
												color: this.textColor,
												fontSize: '28rpx',
												// position: 'absolute',
												// left: "-25rpx",
												// bottom: '40rpx'
											}
										}
									]
								}

							]
						},
						this.watermark && {
							type: 'image',
							src: this.watermark,
							css: {
								width: '180rpx',
								height: '180rpx',
								position: 'absolute',
								top: '25rpx',
								left: '25rpx',
								objectFit: 'contain',
								objectPosition: '50% 0'
							}
						},
						{
							type: 'image',
							src: this.defaultCode,
							css: {
								width: '160rpx',
								height: '160rpx',
								position: 'absolute',
								bottom: '25rpx',
								right: '25rpx'
							}
						},
						{
							type: 'view',
							css: {
								width: '250rpx',
								position: 'absolute',
								top: '25rpx',
								right: '25rpx',
							},
							views: [
								this.posterText && {
									type: 'text',
									text: this.posterText
								}
							]
						}
					]
				}
				// 渲染
				this.$refs.poster.render(jsonSchema);
				// 生成图片
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: "png",
					quality: 1,
					success: (res) => {
						// 非H5 保存到相册
						this.savePoster(res.tempFilePath)
					},
				});
			},
			done() {
				uni.hideLoading()
			},
			fail() {

			}
		}
	};
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFF;

		.container {
			/** 外层一定要指定大小 */
			height: 100vh;
		}

		.clock-day-text {
			font-size: 50rpx !important;
			margin-left: 20rpx;
		}

		.box {
			width: 92%;
			height: 120vw;
			margin-top: 20rpx;
			position: sticky;
			top: -60vw;
			background-size: 100% 100%;
			color: #fff;
			z-index: 1;

			.canvasBox {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
			}

			.watermark {
				position: absolute;
				left: 27rpx;
				top: 23rpx;
				width: 180rpx;
				height: 180rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					max-width: 100%;
					opacity: 1;
					object-fit: cover;
					object-position: center 0 !important;
				}
			}

			.poster-text {
				position: absolute;
				right: 27rpx;
				top: 23rpx;
				width: 250rpx;
				text-align: right;
				color: #000;
			}

			.watermark1 {
				image {
					position: absolute;
					top: -50%;
					transform: translateY(25%);
				}
			}

			.avatar {
				// position: absolute;
				// bottom: 300rpx;
				// left: 20rpx;

				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 12rpx;
				}
			}

			.check {
				// position: absolute;
				// bottom: 220rpx;
				// left: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.number {
					font-size: 42rpx;
					font-weight: bold;
					margin: 0 20rpx;
				}

				.changeText {
					margin-left: 20rpx;
					// border-bottom: 1rpx solid;
					font-size: 28rpx;
					color: #fff;
					background-color: #07c160;
					border-radius: 8rpx;
					padding: 5rpx 20rpx;
					white-space: nowrap;
				}
			}

			.mark {
				// position: absolute;
				// bottom: 300rpx;
				// left: 20rpx;
				width: 95vw;
				font-size: 32rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.code {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				height: 150rpx;
				width: 150rpx;

				image {
					height: 150rpx;
					width: 150rpx;
				}
			}

			.date {
				// position: absolute;
				// bottom: 120rpx;
				// left: 20rpx;
				display: flex;
				align-items: center;
				// margin-top: 10rpx;

				.time {
					font-size: 68rpx;
					font-weight: bold;
					// padding-right: 20rpx;
				}

				.solid {
					height: 65rpx;
					border-right: 5rpx solid;
					margin: 0 20rpx;
				}

				.right {
					.day {
						font-size: 24rpx;
					}

					.week {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}

			.address {
				// position: absolute;
				// bottom: 30rpx;
				// left: 20rpx;
				width: 500rpx;
				display: flex;
				align-items: center;
				// margin-top: 10rpx;

				.text {
					max-width: 350rpx;
					font-size: 28rpx;
					//overflow: hidden;
					// ;
					//word-break:break-all;
					//overflow-wrap:normal;
					//word-wrap:normal;
					//text-overflow: ellipsis;
					//white-space: nowrap;
					word-wrap: break-word;
				}

				.text2 {
					margin-left: 20rpx;
					// border-bottom: 1rpx solid;
					font-size: 28rpx;
					color: #fff;
					background-color: #07c160;
					border-radius: 8rpx;
					padding: 5rpx 20rpx;
				}

				image {
					height: 50rpx;
					width: 50rpx;
				}
			}
		}

		.tab {
			width: 92%;
			margin-top: 50rpx;

			.tab-title {
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: sticky;
				top: 60vw;
				z-index: 1;
				background-color: #FFF;

				.item {
					width: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx;

					image {
						height: 30rpx;
						width: 30rpx;
					}

					text {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			.tab-content {
				.box1 {
					display: flex;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.item {
						width: 22%;
						height: 27vw;
						padding: 1.5%;
						position: relative;

						.camera {
							height: 100%;
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background-color: #a6ff98;
							border-radius: 18rpx;

							image {
								width: 70rpx;
								height: 70rpx;
							}

							text {
								font-size: 28rpx;
							}
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 18rpx;
						}

						.in-use {
							width: 100%;
							height: 100%;
							border-radius: 18rpx;
							background-color: rgba(0, 0, 0, 0.5);
							position: absolute;
							top: 0;
							left: 0;
							color: #FFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.box2 {
					display: flex;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.color {
						width: 92vw;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.item {
							.outside {
								padding: 5rpx;
								border-radius: 50%;

								.inside {
									height: 35rpx;
									width: 35rpx;
									border-radius: 50%;
								}
							}
						}
					}

					.line {
						width: 100%;
						margin-top: 20rpx;
						text-align: end;

						text {
							color: #07c160;
							font-size: 28rpx;
						}
					}

					.text {
						width: 100%;
						margin-top: 20rpx;
						padding: 20rpx;
						background-color: #f6fff9;
						color: #8a8a8a;

						.item {
							display: flex;
							justify-content: space-between;
							// align-items: center;
							margin-top: 10rpx;
							padding-bottom: 10rpx;
							border-bottom: 1rpx solid #fff;

							text {
								width: 590rpx;
							}

							image {
								height: 30rpx;
								width: 30rpx;
								margin-top: 10rpx;
							}
						}
					}
				}

				.box3 {
					//display: flex;
					//flex-wrap: wrap;
					//margin-top: 40rpx;

					.line {
						display: flex;
						justify-content: space-around;
						margin-top: 80rpx;

						.btn {
							height: 100rpx;
							width: 250rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 15rpx;
							color: #fff;
						}

						.btn1 {
							background: linear-gradient(#1cc7fc, #21a4f9);
						}

						.btn2 {
							background: linear-gradient(#04d396, #07c160);
						}
					}

					.item {
						width: 22%;
						height: 27vw;
						padding: 1.5%;

						.camera {
							height: 100%;
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background-color: #a6ff98;
							border-radius: 18rpx;

							image {
								width: 70rpx;
								height: 70rpx;
							}

							text {
								font-size: 28rpx;
							}
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 18rpx;
						}
					}
				}

				.box4 {
					width: 92vw;

					.line {
						display: flex;
						justify-content: space-around;
						margin-top: 80rpx;

						.btn {
							height: 100rpx;
							width: 250rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 15rpx;
							color: #fff;
						}

						.btn1 {
							background: linear-gradient(#1cc7fc, #21a4f9);
						}

						.btn2 {
							background: linear-gradient(#04d396, #07c160);
						}
					}
				}
			}
		}

		.popup {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;

			.M {
				height: 100%;
				width: 100%;
				background-color: #000;
				opacity: 0.4;
			}

			.popup-box {
				width: 80vw;
				position: absolute;
				top: 20%;
				left: 10vw;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 15rpx;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}

				.input-box {
					margin-top: 30rpx;

					textarea {
						width: 60vw;
						height: 200rpx;
						font-size: 32rpx;
						border: 1rpx solid #ccc;
						border-radius: 15rpx;
						padding: 30rpx;
					}
				}

				.popup_select {
					width: 60vw;
					height: 80rpx;
					margin: 0 auto;
					line-height: 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 30rpx;

					view {
						padding: 0 20rpx;
						background-color: #fff;
						border-radius: 40rpx;
					}

					.on {
						background-color: red;
						font-weight: bold;
						color: #fff;
					}
				}

				.btnrow {
					width: 90%;
					display: flex;
					justify-content: space-around;
					margin: 50rpx 0;

					.btn {
						height: 80rpx;
						width: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						color: #fff;
						border-radius: 15rpx;
					}

					.btn1 {
						background-color: #d1d1d1;
					}

					.btn2 {
						background-color: #07c160;
					}
				}
			}
		}

		.z {
			margin-top: 100rpx;
		}

		.submit {
			position: fixed;
			bottom: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			background-color: #07c160;
			border-radius: 50rpx;
			padding: 20rpx 50rpx;
			margin: 80rpx 0 0;
		}

		.success-img {
			width: 100%;
			height: 1300rpx;
			margin-top: 20rpx;
		}
	}
</style>